<template>
  <div class="nav">
    <div>
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#f7f7f7"
      text-color="#000"
      active-text-color="#3070b3"
      :router="true"
    >
    <el-menu-item index="home"><a>Home</a></el-menu-item>
      <el-menu-item index="markdown?mid=introduction"><a>Introduction</a></el-menu-item>
      <el-submenu index="3">
        <template slot="title">Research</template>
        <el-menu-item index="research?rid=0"><a>Overview</a></el-menu-item>
        <el-menu-item index="research?rid=1"><a>Hypersonic Flow</a></el-menu-item>
        <el-menu-item index="research?rid=2"><a>Droplets</a></el-menu-item>
        <el-menu-item index="research?rid=3"><a>Multiscale Simulation</a></el-menu-item>
        <el-menu-item index="research?rid=4"><a>Nanomaterials</a></el-menu-item>
        <el-menu-item index="research?rid=5"><a>Novel UAV</a></el-menu-item>
        <el-menu-item index="research?rid=6"><a>Intelligent Energy Systems</a></el-menu-item>
        <el-menu-item index="research?rid=7"><a>Hydrogen Storage And Fuel Cell</a></el-menu-item>
      </el-submenu>
      <el-menu-item index="publications"><a>Publications</a></el-menu-item>
      <el-menu-item index="memberall"><a>Members</a></el-menu-item>
      <el-submenu index="7">
        <template slot="title">Gallery</template>
        <el-menu-item index="gallery?type=group"><a>Group</a></el-menu-item>
        <el-menu-item index="gallery?type=lab"><a>Lab</a></el-menu-item>
      </el-submenu>
      <el-menu-item index="markdown?mid=opportunity"><a>Opportunities</a></el-menu-item>
    </el-menu>
  </div>
  </div>
</template>

<script>
  export default { };
</script>

<style lang="less" scoped>
@text-color:#000;
@nav-size: 18px;

.nav{ width: 100%; }
.el-menu-demo{font-family: Arial,sans-serif;font-weight:bold;}
a{ text-decoration : none; } 
a:visited {color:@text-color;}
a:link {color:@text-color;}

.el-menu-demo{
  li{font-size: @nav-size;}
}

/deep/.el-menu{ display: flex; align-items: center; justify-content: center; }
/deep/.el-submenu__title { 
  font-size: @nav-size;
  i{color: @text-color;} 
}
// style="width: 500px;margin:0 auto;overflow-x: auto;display: flex;"
// .top { width: 100%; margin: 0px auto; }
// .banner { height: 60px; text-align: left; background-image: url("../assets/top-bg.jpg");}

</style>
